<template>
  <div class="s-box">
    <scroller lock-x @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="20">
      <group title="牛人集市">
        <cell-box v-for="item in awesomeList" align-items="center" @click.native="routerTo('userInfo/'+item.userId)">
          <div class="img-content">
            <avatar :src="item.avatar" boxWidth="1.2rem" boxHeight="1.2rem"></avatar>
          </div>
          <div class="awesomeList-info">
          <span class="text-large">
            {{item.username}}
          </span>
            <br>
            <span class="text-small">
            {{item.shortIntroduction}}
          </span>
          </div>
          <div class="awesomeList-item">
          <span>
            今日收益
          </span>
            <br>
            <span :class="[item.todayProfitPercent<0?'text-green':'text-red']">
            {{item.todayProfitPercent | formatPlusMinus}}%
          </span>
          </div>
          <div class="awesomeList-item">
          <span>
            预期年化
          </span>
            <br>
            <span>
            {{item.expectYearProfitPercent}}%
          </span>
          </div>
        </cell-box>
        <load-more :show-loading="loading" :tip="loading?'':'已全部加载'"></load-more>
      </group>
    </scroller>
  </div>
</template>

<script>
  import Avatar from '@/components/Avatar'
  import {Scroller, Group, CellBox, LoadMore} from 'vux'

  export default {
    components: {
      Avatar,
      Scroller,
      Group,
      CellBox,
      LoadMore
    },
    data() {
      return {
        awesomeList: [],
        onFetching: false,
        pageNum: 1,
        loading: true
      }
    },
    created() {
//      this.getMyOperation();
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.scrollerBottom.reset({top: 0})
      })
    },
    methods: {
      onScrollBottom() {
        if (!this.onFetching) {
          this.onFetching = true;
          this.getMyOperation();
        }
      },
      getMyOperation() {
        this.$api.getAllAwesome({
          pageSize: 10,
          pageNum: this.pageNum
        }).then((data) => {
          for (let item of data.awesomeList) {
            this.awesomeList.push(item);
          }
          if (data.totalPage > this.pageNum) {
            this.pageNum++;
            this.$nextTick().then(() => {
              this.$refs.scrollerBottom.reset()
            });
            this.onFetching = false;
          } else {
            this.loading = false;
          }
        });

      }
    }
  }
</script>

<style lang="less" scoped>

  .img-content {
    font-size: 0;
    margin-right: .1rem;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .awesomeList-info {
    width: 5rem;
    border-right: 1px solid #f1f1f1;
    margin-left: 5px;
  }

  .awesomeList-item {
    width: 2rem;
    text-align: center;
    border-right: 1px solid #f1f1f1;
    align-items: center;
    span {
      font-size: .3rem;
    }
  }
</style>
